<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<nav class="top-bar data-topbar">
		<ul class="title-area">
			<li class="name">
				<h1>
					<a href="../pages/accueil.jsf">DreamsHop</a>
				</h1>
			</li>
			<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>
			</li>
		</ul>
		<section class="top-bar-section">

			<!-- Left Nav Section -->
			<ul class="left">
				<li class="has-dropdown not-click"><a
					href="../pages/catalogue.jsf">Catalogue
						de rêves</a>
					<ul class="dropdown">
						<li><a href="../pages/catalogue.jsf">Rêves
								de gloire</a></li>
						<li><a href="../pages/catalogue.jsf">Voyages</a>
						</li>
						<li class="has-dropdown not-click"><a href="#">Sport</a>
							<ul class="dropdown">
								<li><a href="../pages/catalogue.jsf">Football</a>
								</li>
								<li><a href="../pages/catalogue.jsf">Jokari</a>
								</li>
							</ul></li>
						<li><a href="../pages/catalogue.jsf">Science-fiction</a>
						</li>
						<li><a href="../pages/catalogue.jsf">Historiques</a>
						</li>
						<li><a href="../pages/catalogue.jsf">Paix
								dans le monde</a></li>
						<li><a href="../pages/catalogue.jsf">Coquins</a>
						</li>
					</ul></li>
				<li class="has-form"><h:form>
						<h:inputText value="#{autoCompletionMB.recherche}"
							id="headerAutocomplete" placeholder="Rechercher un rêve" />
					</h:form></li>
			</ul>

			<!-- Right Nav Section -->
			<ul class="right">
				<li class="has-dropdown not-click"><a href="#">Administration</a>
					<ul class="dropdown">
						<li><a href="../admin/listeRevesBoutique.jsf">Gestion
								rêves</a></li>
						<li><a href="../admin/gestionPromotion.jsf">Gestion
								promotions</a></li>
						<li><a href="../admin/commandesRecuesBoutique.jsf">Commandes
								reçues</a></li>
					</ul></li>
				<h:panelGroup rendered="#{connexionMB.client eq null}">
					<li><a href="#" data-reveal-id="inscription">Inscription</a></li>
				</h:panelGroup>
				<h:panelGroup rendered="#{!(connexionMB.client eq null)}">
					<li><a href="#" data-reveal-id="monProfil">Mon profil</a></li>
				</h:panelGroup>
				<li class="has-form">
					<div class="row collapse">
						<div class="large-4 small-4 columns">

							<h:panelGroup rendered="#{connexionMB.client eq null}">
								<a href="#" class="button" data-reveal-id="loginDiv">Connexion</a>
							</h:panelGroup>

							<h:panelGroup rendered="#{!(connexionMB.client eq null)}">
								<dd>
									<h:form>
										<h:commandLink class="button" value="Déconnexion"
											action="#{connexionMB.logout}" />
									</h:form>
								</dd>
							</h:panelGroup>

						</div>
					</div>
				</li>
			</ul>
		</section>
	</nav>
	<h:panelGroup rendered="#{connexionMB.client eq null}">
		<div id="loginDiv" class="reveal-modal small" data-reveal="true">
			<ui:include src="./forms/login.xhtml" />
		</div>
	</h:panelGroup>
	<h:panelGroup rendered="#{!(connexionMB.client eq null)}">
		<div id="monProfil" class="reveal-modal" data-reveal="true">
			<ui:include src="./forms/monProfil.xhtml" />
		</div>
	</h:panelGroup>
	<h:panelGroup rendered="#{connexionMB.client eq null}">
		<div id="inscription" class="reveal-modal" data-reveal="true">
			<ui:include src="./forms/inscription.xhtml" />
		</div>
	</h:panelGroup>
	<h:panelGroup rendered="#{!(connexionMB.client eq null)}">

		<div id="creerAdresse" class="reveal-modal" data-reveal="true">
			<ui:include src="./forms/creerAdresse.xhtml" />
		</div>
		<div id="modifierAdresse" class="reveal-modal" data-reveal="true">
			<ui:include src="./forms/modifierAdresse.xhtml" />
		</div>
	</h:panelGroup>
</ui:composition>